<template>
	<view class="text-box" :style="{maxHeight:boxH,padding:pading}" :class="(fixed && isShow && isIcon )?fixStyle:''" @tap="shousuo">
		<scroll-view scroll-y="true" :style="{width:maxW+'%',height:boxH}">
			<view>
				
				<text class="text-box-content" :style="{paddingLeft:pading,fontSize:fontSize+'rpx',fontWeight:fontWidth}">
				    {{title}} 
					<text class="text-blue margin-left cuIcon-unfold " v-if="!isShow && isIcon && type==1"></text>
					<text class="text-blue margin-left cuIcon-fold" v-if="isShow && isIcon && type==1"></text>
				</text>
			</view>
		</scroll-view>
		<text class="cuIcon-right right " v-if="!isShow && isIcon && type==0"></text>
		<text class="cuIcon-unfold right" v-if="isShow && isIcon && type==0"></text>
	</view>
</template>

<script>
	export default {
		name: "TextOver",
		props: {
			fontWidth:{
				type:Number,
				default:500
			},
			fontSize:{
				type:Number,
				default:26
			},
			content: {
				type: String,
				default: ""
			},
			isFixed: {
				type: Boolean,
				default: false
			},
			type: {
				type: Number,
				default: 0
			},
			num: {
				type: Number,
				default: 20
			},
			maxHight: {
				type: String,
				default: "100%",
			},
			maxW: {
				type: Number,
				default: 100

			},
			fixStyle: {
				type: String,
				default: 'fixedText'
			},
			pading:{
				type:String,
				default:"10upx"
			}
		},
		data() {
			return {
				isShow: false,
				boxH: 100 + '%',
				title: '',
				fixed: false,
				isIcon: false,
			}
		},
		watch: {
			content(val) {
				this.isShow = false;
				this.boxH = 100 + '%';
				this.title = this.content.substring(0, this.num) + "...";
				this.resh();
			},
			isFixed(val) {
				this.fixed = val;
			}
		},
		mounted() {
			this.resh();
		},
		methods: {
			resh() {
				this.fixed = this.isFixed;
				if (this.content.length > this.num) {
					this.isIcon = true;
					this.title = this.content.substring(0, this.num) + "...";
				} else {
					this.isIcon=false;
					this.title = this.content;
				}
			},
			shousuo() {
				
				if (this.content.length <= this.num) {
					return false;
				}
				(this.isShow) ? (() => {
					this.isShow = false;
					this.boxH = 100 + '%';
					this.title = this.content.substring(0, this.num) + "...";
				})() : (() => {
					this.$nextTick(() => {
						this.boxH = this.maxHight;
						this.title = this.content;
					})
					this.isShow = true;
				})()

			}
		}
	}
</script>

<style scoped>
	.text-box {
		width: 100%;
		white-space: normal;
		display: flex;
		flex-direction: row;
		word-wrap: break-word;
		-webkit-overflow-scrolling: touch
	}

	.boxw {
		width: 100%;
	}

	.boxw1 {
		width: 90%;
	}

	.text-box-content {
		color: #333333;
		display: inline-block;
		line-height: 36rpx;
		word-break: break-word;
		text-align: justify;
		font-family: PingFang SC;
		font-weight: 500;
	}

	.text-box-content-e {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		display: inline-block;
		word-wrap: break-word;
		padding-bottom: 20upx;
	}

	.fixedText {
		position: fixed;
		max-width: 82vw;
		z-index: 9999;
		border-radius: 20upx;
		padding: 8upx;
		word-wrap: break-word
	}

	.fixedText1 {
		position: fixed;
		top: 0;
		width: 100vw;
		height: 100%;
		z-index: 99;
		padding: 8upx;
		background-color: white;
	}

	.right {
		position: absolute;
		float: right;
		right: 10upx;
	}
</style>
